<template>
  <div class="big">
    <!-- 头部 -->
    <header>
      <!-- 左面空盒子 -->
      <div class="nav"></div>
      <!-- 中间文字 -->
      <span class="gwc">购物车</span>
      <!-- 右面盒子 -->
      <div class="nav">
        <a class="bj" href=""> 编辑 </a>
        <a class="xx" href="">
          <img src="./img/dian.png" alt="" />
          <!-- <span>消息</span> -->
        </a>
      </div>
    </header>
    <!-- 主要内容 -->
    <main>
      <!-- 上部分 -->
      <div class="main-top">
        <a class="hei-a" href=""> 全部商品<span>(12)</span> </a>
        <a class="bai-a" href=""> 降价通知<span>(1)</span> </a>
        <a href=""> 常买<span>(0)</span> </a>
        <a href=""> 分类 </a>
      </div>
      <!-- 第二个车 -->
      <div class="second" id="sss" v-for="(i, item) in arr" :key="item">
        <!-- 内容 -->
        <div class="second-cont">
          <!-- 第一排 -->
          <div class="cont-top">
            <!-- 左面 -->
            <div class="top-left">
              <input
                type="checkbox"
                name=""
                id=""
                class="checkall"
                v-bind:checked="i.xuanze"
                @click="xuan(item)"
              />
              <img src="./img/矢量智能对象.png" alt="" />
              <span>{{ i.title }}></span>
            </div>
            <!-- 右面 -->
          </div>
          <!-- 第二排 -->
          <div class="second-s">
            <span>跨自营/店铺满折</span>
            <p>已满2件,已减7.84元</p>
          </div>
          <!-- 第三排 -->
          <div class="third">
            <!-- 第一个 -->
            <div class="third-top">
              <!-- 左面 -->
              <div class="t-t-left">
                <input
                  type="checkbox"
                  v-bind:checked="i.xuanze"
                  @click="xuan(item)"
                />
                <!-- <a class="tp" href=""> -->
                <img :src="i.lujing" alt="" />
                <!-- </a> -->
              </div>
              <!-- 右面 -->
              <div class="t-t-right">
                <p>夏季新款牛仔裤短裤女韩版宽</p>
                <p>松不规则毛边显瘦热裤潮</p>
                <span>品牌店 | 1.2万+人付款</span>
              </div>
            </div>
            <!-- 第二行 -->
            <div class="third-s">
              <span>{{ i.price }}</span>
              <!-- 右面按钮 -->
              <div class="right-small">
                <button @click="jian(item)">-</button>
                {{ i.shuliang }}
                <button @click="jia(item)">+</button>
              </div>
            </div>
          </div>
          <!-- 成功 -->

          <!-- <div class="chenggong">
            下单成功可获得100积分，用积分可兑换精美好礼
          </div> -->
        </div>
      </div>
    </main>
    <div class="buy">
      <!-- 左面 -->
      <div class="buy-left">
        <div class="left-11">
          <input type="checkbox" @click="duoxuan" :checked="quanbu" />
          全选
        </div>
        <div class="left-22">
          <p>
            <span class="s1">总计</span> <span class="s2">￥</span
            ><span class="s3">{{ zongjia }}</span>
          </p>
          <h5>不包含运费</h5>
        </div>
      </div>
      <!-- 右面 -->
      <a class="right-aa" href=""> 去结算({{ zongshu }}) </a>
    </div>
    <!-- 尾部 -->
    <footer>
      <a href="">
        <img src="./img/shouye.png" alt="" />
        <span>首页</span>
      </a>
      <a href="">
        <img src="./img/zs.png" alt="" />
        <span>分类</span>
      </a>
      <a href="">
        <img src="./img/dt.png" alt="" />
        <span>发现</span>
      </a>
      <a href="">
        <img src="./img/car.png" alt="" />
        <span class="te">购物车</span>
      </a>
      <a href="">
        <img src="./img/wode.png" alt="" />
        <span>我的</span>
      </a>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [
        {
          title: "七夕情人节",
          price: 19.6,
          lujing: require("./img/chide.jpg"),
          xuanze: false,
          shuliang: 0,
        },
        {
          title: "好人家京东自营旗舰店",
          price: 9.6,
          lujing: require("./img/chidea.jpg"),
          xuanze: false,
          shuliang: 0,
        },
      ],
      n: 0,
      quanbu: false,
    };
  },
  methods: {
    xuan(item) {
      this.arr[item].xuanze = !this.arr[item].xuanze;
      var bool = true;
      this.arr.forEach((item) => {
        if (item.xuanze == false) {
          bool = false;
        }
      });
      this.quanbu = bool;
    },
    jia(item) {
      this.arr[item].shuliang++;
    },
    jian(item) {
      this.arr[item].shuliang--;
    },
    duoxuan() {
      this.quanbu = !this.quanbu;
      this.arr.forEach((item) => {
        item.xuanze = this.quanbu;
      });
    },
  },
  computed: {
    zongshu() {
      var sum = 0;
      this.arr.forEach((item) => {
        sum += item.shuliang;
      });
      return sum;
    },
    zongjia() {
      var jia = 0;
      this.arr.forEach((item) => {
        jia += item.shuliang * item.price;
      });
      return jia.toFixed(2);
    },
  },
};
</script>

<style>
.big {
  height: 450px !important;
}
.t-t-left img {
  width: 100px;
  height: 80px;
  margin-left: 7px;
  margin-right: 10px;
}
/* 主要内容 */
main {
  background: #fff;
  position: relative;
  flex: 1;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* 上部分 */
.main-top {
  width: 100%;
  height: 2.71rem;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: -0.05rem;
  align-items: center;
  left: 0%;
  background: #fff;
}
.main-top a {
  display: flex;
  width: 33.3%;
  font-size: 0.26rem;
  justify-content: center;
  align-items: center;
  color: #333333;
  height: 2.7rem;
}
.main-top a span {
  font-size: 0.21rem;
  display: flex;
  align-items: center;
  padding-top: 0.05rem;
}
.main-top .hei-a {
  background: #333;
  color: #fff;
}
.main-top .bai-a {
  border-left: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
}
/*第二个车 */

.second {
  width: 100%;
  height: 6.05rem;
  margin-top: 43px;
  margin-bottom: 60px;
}
/* 内容 */
.second-cont {
  width: 100%;
  height: 3.85rem;
  background: #fff;
  border-radius: 0.08rem;
}
/* 第一排 */
.cont-top {
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* 左面 */
.top-left {
  float: left;
  height: 2.6rem;
  display: flex;
  align-items: center;
}
.top-left img {
  margin-left: 10px;
  margin-right: 10px;
}
.checkall {
  width: 20px;
  height: 20px;
  background: #ccc;
  border-radius: 50% !important;
}
.top-left a {
  display: flex;
  background: #f2f2f2;
  border-radius: 50%;
}
.left1 {
  margin-left: 20px;
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.left1 span {
  font-size: 0.26rem;
  color: #333;
}
/*右面 */
.right1 {
  width: 1rem;
  height: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.21rem;
  color: #333;
  white-space: nowrap;
}
.right1 span {
  display: block;
  width: 0.14rem;
  height: 0.14rem;
  border-style: solid;
  border-width: 0.04rem 0.04rem 0 0;
  border-color: #3b3b3b;
  transform: rotate(45deg);
}
/* 第二排 */
.second-s {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
}
.second-s span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 20px;
  background: #ff5500;
  border-radius: 0.14rem;
  color: #fff;
  font-size: 0.21rem;
}
.second-s p {
  font-size: 0.24rem;
  color: #333;
  margin-right: 80px;
}
/* 第三排 */
.third {
  width: 100%;
  height: 2.98rem;
  display: flex;
  flex-direction: column;
}
/* 第一个 */
.third-top {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 20px;
}
/* 左面 */
.t-t-left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.duihao {
  width: 0.36rem;
  height: 0.36rem;
  display: flex;
}
.tp {
  display: flex;
}
.tp img {
  width: 3.78rem;
  height: 2.26rem;
}
/* 右面 */
.t-t-right {
  display: flex;
  flex-direction: column;
}
.t-t-right p {
  font-size: 0.25rem;
  color: #333;
}
.t-t-right span {
  font-size: 0.18rem;
  color: #808080;
}
/* 第二行 */
.third-s {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 3.08rem;
  padding-right: 3.16rem;
}
.third-s span {
  font-size: 0.24rem;
  color: #f90f61;
}
/* 右面按钮 */
.right-small {
  display: flex;
  width: 100px;
  align-items: center;
  justify-content: space-between;
  color: #333;
}
.right-small button {
  width: 20px;
  height: 20px;
  color: #000;
  border-radius: 50%;
  border: none;
}
.right-small a {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.baibai img {
  width: 0.17rem;
  height: 0.03rem;
}
.heihei img {
  width: 0.17rem;
  height: 0.17rem;
}
/* 白按钮 */
.baibai {
  background: #f2f2f2;
}
.heihei {
  background: #333333;
}
/* 成功 */
.chenggong {
  height: 0.59rem;
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: 0.37rem;
  font-size: 0.21rem;
  color: #333;
}
/* 支付 */
.buy {
  width: 100%;
  display: flex;
  justify-content: space-between;
  bottom: 20px;
}
/* 左面 */
.buy-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left-11 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
}
.left-11 span {
  border-radius: 50%;
  background: #b3b3b3;
  display: flex;
}
/* 中 */
.left-22 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  white-space: nowrap;
}
.left-22 p {
  display: flex;
  align-items: center;
}
.s1 {
  font-size: 0.28rem;
  color: #333;
}
.s2 {
  font-size: 0.15rem;
  color: #e93534;
}
.s3 {
  font-size: 0.28rem;
  color: #e93534;
}
.left-22 h5 {
  font-size: 0.2rem;
  color: #626262;
  font-weight: 400;
}
/* 右面 */
.right-aa {
  width: 100px;
  border-radius: 20px;
  background: #f90f61;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.3rem;
  color: #fff;
}
</style>
<style>
/* 大盒子 */
.app,
html,
body {
  width: 100%;
  height: 100%;
}
.app {
  display: flex;
  flex-direction: column;
}
/* 头部 */
header {
  width: 100%;
  height: 2.88rem;
  display: flex;
  justify-content: space-between;
  padding: 0 0.3rem;
  align-items: center;
  background: lightblue;
}
.gwc {
  /* font-size: 0.33rem; */
  color: #fff;
}
.nav {
  width: 4.4rem;
  height: 2.88rem;
  display: flex;
  justify-content: space-between;
}
.nav .xx {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  white-space: nowrap;
}
.nav .bj {
  white-space: nowrap;
  height: 2.88rem;
  font-size: 0.28rem;
  color: #fff;
  display: flex;
  align-items: center;
}
.nav a img {
  width: 2rem;
  height: 0.5rem;
}
</style>
<style>
/* 尾部 */
footer {
  border-top: 1px solid #f2f2f2;
  padding-left: 0.52rem;
  padding-right: 0.57rem;
  width: 100%;
  height: 0.9em;
  display: flex;
  justify-content: space-between;
}
footer a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 0.9rem;
  padding-bottom: 0.1rem;
  padding-top: 0.19rem;
  align-items: center;
}
footer a span {
  font-size: 0.18rem;
  color: #808080;
}
.te {
  color: #808080;
}
</style>
<style>
.big {
  height: 10000px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul,
li {
  list-style: none;
}

a,
input,
button {
  -webkit-tap-highlight-color: transparent;
  /* 移除点击产生的高亮效果：透明色 */
}

img,
a {
  -webkit-touch-callout: none;
  /* 禁止长按弹出菜单 */
}
img {
  vertical-align: middle;
}
/* 人造换轴 */
.row {
  flex-direction: row;
}
.column {
  flex-direction: column;
}
</style>